<template>
	<view class="">
		<view class="replys" v-for="item in list" :key="item">
			<view class="flex-all replys_box">
				<image v-if="item.user.avatar" :src="url + item.user.avatar" class="avatar"
					style="border-radius:50%;width: 35px;" mode="widthFix" />
				<image v-else class="imgicon" src="/static/imgs/tou.png" mode="widthFix" />
				<view class="flex-box">
					<view class="name">{{ item.user.username }}</view>
					<view class="speech"><text>回复</text> <text class="spName">{{ username }}：</text><text>{{ item.contents
							}}</text></view>
					<view class="time"><text class="time_ago">{{ formatTimeAgo(item.createtime) }}</text><text
							class="replyBtn">回复</text></view>
				</view>
			</view>
			<view v-if="child > 0">
				<Reply :parent_id="item.id" :article_id="item.article_id" :username="item.username"></Reply>
			</view>
		</view>
	</view>
</template>

<script>
import {
	remarkList
} from '../../api/hall.js'
import env from '@/utlis/env.js';
export default {
	name: "Reply",
	data() {
		return {
			list: {},
			url: '',
			child: 0,
		}
	},
	props: {
		parent_id: {
			type: Number,
			required: true,
		},
		article_id: {
			type: Number,
			required: true,
		},
		username: {
			type: String,
			required: true,
		},
	},
	mounted() {
		this.url = env.baseUrl
		this.remark();
		console.log(this.parent_id, '负极id');
	},
	methods: {
		formatTimeAgo(createtime) {
			const currentTime = new Date();
			const articleTime = new Date(createtime);

			const timeDifference = currentTime - articleTime;
			const seconds = Math.floor(timeDifference / 1000);
			const minutes = Math.floor(seconds / 60);
			const hours = Math.floor(minutes / 60);
			const days = Math.floor(hours / 24);
			const weeks = Math.floor(days / 7);

			if (weeks >= 1) {
				const options = {
					year: 'numeric',
					month: 'numeric',
					day: 'numeric',
					hour: 'numeric',
					minute: 'numeric',
					hour12: false,
				};

				return new Intl.DateTimeFormat('default', options).format(articleTime);
			} else if (days >= 2) {
				return `${days}天前`;
			} else if (days === 1) {
				return '昨天';
			} else if (hours >= 1) {
				return `${hours}小时前`;
			} else if (minutes >= 1) {
				return `${minutes}分钟前`;
			} else {
				return '刚刚';
			}
		},
		async remark() {
			const res = await remarkList({
				'article_id': this.article_id,
				'parent_id': this.parent_id,
			}).then(res => {
				console.log(res, '评论列表');
				this.list = res.data.data
				this.child = res.data.child
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.replys {
	padding: 0 30rpx 0 90rpx;

	.replys_box {
		padding: 30rpx 0;
		border-bottom: 1px solid #EEE;
		align-items: flex-start;

		.imgicon {
			width: 46rpx;
			flex-shrink: 0;
		}

		.flex-box {
			padding-left: 14rpx;

			.name {
				font-size: 26rpx;
				color: #888888;
				line-height: 38rpx;
			}

			.speech {
				font-size: 26rpx;
				color: #252525;
				line-height: 42rpx;
				margin: 16rpx 0;

				.spName {
					display: inline-block;
					font-size: 26rpx;
					color: #888888;
					line-height: 38rpx;
					margin-left: 4rpx;
				}
			}

			.time {
				.time_ago {
					display: inline-block;
					color: #888;
					font-size: 24rpx;
					line-height: 42rpx;
				}

				.replyBtn {
					display: inline-block;
					font-size: 24rpx;
					color: #464646;
					line-height: 42rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
}
</style>